<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>组合</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md3">
            <div class="vip-chart bg-info">
                <div class="vip-chart-content">
                    <h5>本日访问量</h5>
                    <h2>198,009</h2>
                    <div id="sparkline1"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-chart bg-dark">
                <div class="vip-chart-content">
                    <h5>本周访问量</h5>
                    <h2>198,009</h2>
                    <div id="sparkline2"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-chart bg-mint">
                <div class="vip-chart-content">
                    <h5>本月访问量</h5>
                    <h2>198,009</h2>
                    <div id="sparkline3"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-chart bg-success">
                <div class="vip-chart-content">
                    <h5>平均停留时间</h5>
                    <h2>00:06:40</h2>
                    <div id="sparkline4"></div>
                </div>
            </div>
        </div>


        <div class="layui-col-md3">
            <div class="vip-chart bg-light">
                <div class="vip-chart-content">
                    <h5>百分比</h5>
                    <h2>1/4</h2>
                    <div id="sparkline5"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-chart bg-light">
                <div class="vip-chart-content">
                    <h5>百分比</h5>
                    <h2>2/3</h2>
                    <div id="sparkline6"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-chart bg-light">
                <div class="vip-chart-content">
                    <h5>百分比</h5>
                    <h2>10/21</h2>
                    <div id="sparkline7"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="vip-chart bg-light">
                <div class="vip-chart-content">
                    <h5>百分比</h5>
                    <h2>50/75</h2>
                    <div id="sparkline8"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">面形图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-1"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">面形堆积图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../js/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="../js/sparkline/jquery.sparkline.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.1.0/rickshaw.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('layer',function(){
    var $ = layui.$;

    // ibox
    var sparkline1 = function(){
        $("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52, 44, 32, 44, 52], {
            type: 'line',
            width: '99%',
            height: '60',
            spotRadius: 4,
            lineWidth:1,
            lineColor:'#ffffff',
            fillColor: false,
            minSpotColor :false,
            maxSpotColor : false,
            highlightLineColor : '#ffffff',
            highlightSpotColor: '#ffffff',
            tooltipChartTitle: '统计',
            tooltipPrefix :'访问量:',
            spotColor:'#ffffff',
            valueSpots : {
                '0:': '#ffffff'
            }
        });
    };

    var sparkline2 = function(){
        $("#sparkline2").sparkline([24, 43, 43, 55, 44, 62, 44], {
            type: 'line',
            width: '99%',
            height: '60',
            spotRadius: 4,
            lineWidth:1,
            lineColor:'#ffffff',
            fillColor: false,
            minSpotColor :false,
            maxSpotColor : false,
            highlightLineColor : '#ffffff',
            highlightSpotColor: '#ffffff',
            tooltipChartTitle: '统计',
            tooltipPrefix :'访问量:',
            spotColor:'#ffffff',
            valueSpots : {
                '0:': '#ffffff'
            }
        });
    };

    var barEl = $("#sparkline3");
    var barValues = [40,32,65,53,62,55,40,32,65,53];
    var barValueCount = barValues.length;
    var barSpacing = 1;
    var sparkline3 = function(){
        barEl.sparkline(barValues, {
            type: 'bar',
            height: 60,
            barWidth: Math.round((barEl.parent().width() - ( barValueCount - 1 ) * barSpacing ) / barValueCount),
            barSpacing: barSpacing,
            zeroAxis: false,
            tooltipChartTitle: '三天访问量',
            tooltipSuffix: ' 人',
            barColor: 'white'
        });
    };

    var sparkline4 = function(){
        $("#sparkline4").sparkline([24, 43, 33, 55, 64, 72, 44, 22], {
            type: 'line',
            width: '99%',
            height: '60',
            spotRadius: 4,
            lineWidth:1,
            lineColor:'#ffffff',
            fillColor: false,
            minSpotColor :false,
            maxSpotColor : false,
            highlightLineColor : '#ffffff',
            highlightSpotColor: '#ffffff',
            tooltipChartTitle: '统计',
            tooltipPrefix :'时间:',
            tooltipSuffix: ' s',
            spotColor:'#ffffff',
            valueSpots : {
                '0:': '#ffffff'
            }
        });
    };

    var sparkline5 = function(){
        $("#sparkline5").sparkline([1, 4], {type: "pie", height: "112", sliceColors: ["#5FB878", "#E6E6E6"],borderColor: '#000000'});
    };

    var sparkline6 = function(){
        $("#sparkline6").sparkline([2, 3], {type: "pie", height: "112", sliceColors: ["#ed5565", "#F5F5F5"]});
    };

    var sparkline7 = function(){
        $("#sparkline7").sparkline([10, 21], {type: "pie", height: "112", sliceColors: ["#5FB878", "#E6E6E6"],borderColor: '#000000'});
    };

    var sparkline8 = function(){
        $("#sparkline8").sparkline([50, 75], {type: "pie", height: "112", sliceColors: ["#ed5565", "#F5F5F5"]});
    };

    var graph1 = new Rickshaw.Graph({
        element: document.querySelector("#graph-1"),
        renderer: 'area',
        series: [
            {
                data: [{ x: 0, y: 13 }, { x: 1, y: 25 }, { x: 2, y: 38 }, { x: 3, y: 44 }, { x: 4, y: 58 }],
                color: 'rgb(26, 179, 148)'
            }
        ]
    });

    var graph2 = new Rickshaw.Graph({
        element: document.querySelector("#graph-2"),
        renderer: 'area',
        series: [
            {
                data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 }],
                color: 'rgb(26, 179, 148)'
            }, {
                data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 }],
                color: 'rgb(238, 238, 238)'
            }]
    });

    // 初始化方法
    var init = function(){
        sparkline1();
        sparkline2();
        sparkline3();
        sparkline4();
        sparkline5();
        sparkline6();
        sparkline7();
        sparkline8();

        graph1.render();
        graph2.render();
    };

    // 监听框架变化
    $(window).on('resize',function(){
        init();
    });

    init();

});
</script>
</body>
</html>